<template>
  <el-sub-menu index="#" v-if="isLogin">
    <template #title>
<!--      <el-dropdown-->
<!--        trigger="click"-->
<!--        @command="log($event)"-->
<!--      >-->
        <div class="user-setting">
          <img alt="图片" src="https://img0.baidu.com/it/u=540475627,1371476713&fm=253&fmt=auto&app=138&f=JPEG?w=290&h=290"/>
          <span>{{ userInfo.username }}</span>
        </div>
<!--        <template #dropdown>-->
<!--          <el-dropdown-item command="home">家</el-dropdown-item>-->
<!--        </template>-->
<!--      </el-dropdown>-->
    </template>
    <el-menu-item index="/logout">退出</el-menu-item>
  </el-sub-menu>

  <el-menu-item v-else index="/login">请登录</el-menu-item>
<!--  <router-link  to="/login">请登录</router-link>-->
<!--  <el-button v-else link @click="login">请登录</el-button>-->
</template>

<script>
import router from '@/router'
import { mapGetters } from 'vuex'
import { ref } from 'vue'

export default {
  name: 'user-menu',
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
    isLogin () {
      console.log(this.userInfo)
      return this.userInfo !== undefined
    },
    user () {
      return this.userInfo
    }
  },
  setup () {
    return {
      hasLogin: false,
      log: console.log
    }
  },
  mounted () {
    this.$store.dispatch('getUserInfo')
  },
  methods: {
    login () {
      router.push('/login')
    }
  }
}
</script>

<style scoped>
.user-setting{
  /*background-color: #42b983;*/
  display: flex;
}
.user-setting > img{
  height: 40px;
}
.user-setting > span{
  margin: 0;
  /*font-weight: 600;*/
  font-size: 18px;
  line-height: 40px;
  display: inline-block;
  /*background-color: #2c3e50;*/
  vertical-align: top;
}
</style>
